
<template>
  <div class='applyMaterial_container'>
    <el-divider content-position="left">申报材料</el-divider>
    <div class="center_box">
      <span class="totalPrice">总计: <i class="fa fa-jpy"></i>{{totalPrice}}</span>
      <el-table :data="applyData" border style="width: 100%; margin-bottom: 1rem;">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="materialName" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="materialPrice" label="价格" width="180">
        </el-table-column>
        <el-table-column prop="materialAmount" label="剩余" width="180">
          <template #default="scope">
            <span>剩余: {{scope.row.materialAmount - scope.row.takeAmount}} </span>
            <el-input-number size="small" :min="1" :max="scope.row.materialAmount"
                             v-model="scope.row.takeAmount"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #header>
            <div style="text-align:right;">
              <el-button type="primary" size="small" round @click="submitApply">提交申报</el-button>
              <el-button size="small" plain round @click="noApply">无需申报</el-button>
            </div>
          </template>
          <template #default="scope">
            <el-button @click="handlerRemove(scope.row)" link size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-divider content-position="left">材料库</el-divider>
    <div class="center_box">
      <el-table
          :data="materialLib.filter(data => !materialLibSearch || data.materialName.includes(materialLibSearch))"
          height="250" border style="width: 80%;" v-loading="tableDataLoading"
          element-loading-text="拼命加载中">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="materialName" label="名称" width="180">
          <template #header>
            <span> <i class="el-icon-key"></i> 名称 </span>
          </template>
        </el-table-column>
        <el-table-column prop="materialPrice" label="价格" width="180">
        </el-table-column>
        <el-table-column prop="materialAmount" label="库存" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #header>
            <el-input v-model="materialLibSearch" size="small" placeholder="输入关键字搜索" />
          </template>
          <template #default="scope">
            <el-button @click="handleSelect(scope.row)" link size="small"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { useMainStore } from '@/js/store.js'
import { createOrderDetailsStep } from '@/js/public.js'
import jsmd5 from 'js-md5'

export default {
  data () {
    //这里存放数据
    return {
      store: useMainStore(),
      materialLib: [],
      materialLibSearch: '',
      applyData: [],
      tableDataLoading: true,
    }
  },
  //监听属性,类似于data概念
  computed: {
    totalPrice () {
      let sum = 0;
      this.applyData.forEach((item) => {
        sum += item.takeAmount * item.materialPrice;
      })
      return sum.toFixed(1);
    }
  },
  //方法集合
  methods: {
    submitApply () {
      let md5 = jsmd5(JSON.stringify(this.applyData));
      this.axios.post("/workerHome/submitApply", {
        applyData: JSON.stringify(this.applyData),
        hashCode: md5,
        orderId: this.store.recordDetails.data.orderId
      }).then(res => {
        if (res.data.code == 43001) {
          this.$message.error(res.data.msg);
          return;
        }
        this.$message.success(res.data.msg);
        this.$notify({
          title: '成功',
          message: '【材料申报凭证】已发送至你的邮箱，请注意查收！',
          type: 'success'
        });
        this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
      })
    },
    noApply () {
      // 使用后端需要的参数名称'order'
      this.axios.post("/workerHome/noApply", {
        order: this.store.recordDetails.data.orderId
      }).then(res => {
        if (res.data.code == 43001) {
          this.$message.error(res.data.msg);
          return
        }
        this.$message.warning(res.data.msg);
        this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
      }).catch(err => {
        console.error('申报材料出错:', err);
        this.$message.error('无需申报操作失败，请稍后再试');
      })
    },
    handlerRemove (row) {
      this.applyData.splice(this.applyData.indexOf(row), 1);
    },
    handleSelect (row) {
      let set = new Set(this.applyData);

      set.add(row);

      this.applyData = [...set];
    },
    getMaterialLibrary () {
      this.axios.get("/workerHome/getMaterialLibrary").then(res => {
        this.materialLib = res.data.data;
        this.tableDataLoading = false;
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getMaterialLibrary();
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css
.applyMaterial_container {
  .center_box {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .contactTip {
    color: gray;
    font-size: 14px;
  }
  .totalPrice {
    color: #f56c6c;
    font-weight: bold;
    float: left;
    font-size: 1.2rem;
  }
}
</style>
